<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>笔记</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        body{
            margin: 10px;
            background-color: #f5f5f5;
        }
        .card{
            margin-bottom: 10px;
        }
    </style>
    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script>
        function init() {
            $("#newNote").click(function () {
                const typeId = $("#type-list").children(".active").attr("data-id");
                // console.log("typeId:",typeId)
                //页面层
                parent.layer.open({
                    type: 2,
                    title: '添加',
                    shadeClose: false, // 点击遮罩不关闭
                    resize:true, // 允许拉伸
                    shade: 0.8,
                    area: ['80%', '80%'],
                    content: 'note_add.html?typeId='+typeId, //iframe的url
                    end:function() {
                        query();
                    }
                });
            })

            $("#note-list").on("click",'[data-type="show"]',function (e) {
                const dom = $(e.target);
                const id = dom.attr("data-id")

                //页面层
                parent.layer.open({
                    type: 2,
                    title: '查看',
                    shadeClose: false, // 点击遮罩不关闭
                    resize:true, // 允许拉伸
                    shade: 0.8,
                    area: ['80%', '80%'],
                    content: 'note_show.html?id='+id, //iframe的url
                    end:function() {
                        query();
                    }
                });
            })

            $("#note-list").on("click",'[data-type="del"]',function (e) {
                const dom = $(e.target);
                const id = dom.attr("data-id")

                //询问框
                layer.confirm('您确认要删除吗？', {
                    title:"删除",
                    btn: ['继续删除','取消'] //按钮
                }, function(index){
                    $.ajax({
                        url:'note/delete',//请求的url
                        type:'POST', //请求方式，GET或POST
                        data:{ //发送服务器的数据
                            id
                        },
                        dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                        success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                            if(data.code == 0){
                                query()
                                layer.close(index);
                            }else{
                                let temp = `
                                    <div class="alert alert-danger" role="alert">
                                        ${data.msg}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>`
                                $("body").append(temp)
                            }
                        },
                        error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                            console.log('错误')
                            console.log(xhr)
                            console.log(textStatus)
                        }
                    })
                });
            })

            $("#newType").click(function () {
                //prompt层

                layer.prompt({title: '新建分类', formType: 0}, function(text, index){
                    layer.close(index);
                    $.ajax({
                        url:'noteType/save',//请求的url
                        type:'POST', //请求方式，GET或POST
                        data:{ //发送服务器的数据
                            name:text
                        },
                        dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                        success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                            if(data.code == 0){
                                queryType()
                                layer.close(index);
                            }else{
                                layer.alert(data.msg, {
                                    icon: 2
                                })
                            }
                        },
                        error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                            console.log('错误')
                            console.log(xhr)
                            console.log(textStatus)
                        }
                    })
                });

            })
        }
        function query() {

            $.ajax({
                url:'note/list',//请求的url
                type:'GET', //请求方式，GET或POST
                data:{ //发送服务器的数据
                },
                dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                    if(data.code == 0){
                        $("#note-list").empty()
                        for(let item of data.data){
                            let temp = `
                                <div class="card" >
                                    <div class="card-body">
                                        <h5 class="card-title">${item.title}</h5>
                                        <p class="card-text">${item.content}</p>
                                        <a href="#" class="card-link" data-id="${item.nid}" data-type="show">详情</a>
                                        <a href="#" class="card-link" data-id="${item.nid}" data-type="del">删除</a>
                                    </div>
                                </div>
                            `
                            $("#note-list").append(temp)
                        }
                    }else{
                        let temp = `
                            <div class="alert alert-danger" role="alert">
                                ${data.msg}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>`
                        $("body").append(temp)
                    }
                },
                error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            })
        }
        function queryType() {
            $.ajax({
                url:'noteType/list',//请求的url
                type:'GET', //请求方式，GET或POST
                data:{ //发送服务器的数据
                },
                dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                    if(data.code == 0){
                        $("#type-list").empty()
                        let isFirst = true
                        for(let item of data.data){
                            let temp
                            if(isFirst){
                                temp = `
                                    <a href="#" class="list-group-item list-group-item-action active" data-id="${item.id}">${item.name}</a>
                                `
                            }else{
                                temp = `
                                    <a href="#" class="list-group-item list-group-item-action " data-id="${item.id}">${item.name}</a>
                                `
                            }
                            $("#type-list").append(temp)

                            isFirst = false
                        }
                    }else{
                        let temp = `
                            <div class="alert alert-danger" role="alert">
                                ${data.msg}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>`
                        $("body").append(temp)
                    }
                },
                error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            })

        }
        $(function () {
            init()
            query()
            queryType()
        })

    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <aside class="col-md-3 ">


            <div class="list-group" id="type-list">
            </div>
        </aside>
        <div class="col-md-9">
            <div>
                <div class="dropdown">
                    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                        新建
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#" id="newNote">新建笔记</a>
                        <a class="dropdown-item" href="#" id="newType">新建分类</a>
                    </div>
                </div>
            </div>
            <div id="note-list">

            </div>

        </div>
    </div>

</div>

<div id="add-content" style="display: none;">
    <div class="container">
        <input type="text" class="form-control" id="title" placeholder="标题">
        <br>
        <textarea class="form-control" id="content" rows="14"></textarea>

        <button class="btn btn-outline-primary my-2 my-sm-0" type="button" id="save">保存</button>
    </div>
</div>


</body>
</html>